<template>
  <div class="settlement-table1">
    <h2 style="font-weight: 700; margin-left: 20px; text-align: center">
      商品订单
    </h2>
    <table>
      <thead>
        <th>商品信息</th>
        <th>尺码/颜色</th>
        <th>价格</th>
        <th>数量</th>
        <th>小计</th>
        <th>删除</th>
      </thead>
      <tbody>
        <tr v-for="(product, index) in datas" :key="product.orders_id">
          <td class="img1">
            <img
              :src="product.orders_goods_img"
              alt=""
              width="80px"
              height="80px"
            />
            <p>{{ product.orders_goods_title }}{{ index }}</p>
          </td>
          <td>{{ product.orders_goods_size }}</td>
          <td>￥{{ product.orders_goods_price }}</td>
          <td>{{ product.orders_goods_count }}</td>
          <td>
            ￥{{ product.orders_goods_price * product.orders_goods_count }}
          </td>
          <td>
            <el-button
              type="info"
              plain
              @click="
                dialogVisible = true;
                firstjie(index);
              "
              >删除</el-button
            >
          </td>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>订单还未支付，确定要删除吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" >取 消</el-button>
              <el-button
                type="primary"
                @click="
                  dialogVisible = false;
                  delorder(product);
                "
                :value="product.orders_id"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </tr>
        <el-empty
          description="亲，没有待支付的订单哦"
          v-show="datas.length == 0"
        ></el-empty>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "List",
  data() {
    return {
      datas: [],
      total: 0,
      dialogVisible: false,
      index: 0,
    };
  },
  created() {
    this.$axios
      .get("/api/order/getUserOrder", {
        params: {
          user_id: localStorage.getItem("user_id"),
        },
      })
      .then((res) => {
        this.datas = res.data.results;
        this.$emit("getChild", this.datas);
      })
  },
  methods: {
    firstjie(index) {
      this.index = index;
      
    },
    delorder(product) {
        this.$axios
          .post("api/order/delOrderById", {
            orders_id: product.orders_id,
          })
          .then((res) => {
            this.datas
            this.datas.splice(this.index,1)
          })
          .catch((err) => {
            console.log("err", err);
          });
        // this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
* {
  list-style: none;
}
.el-empty {
  margin-left: 480px;
}
.settlement-table1 table {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 1px solid #ababab;
  /* border-left:1px solid #ababab; */
  border-collapse: collapse;
}
.settlement-table1 thead {
  color: #ccc;
  background-color: #f4f4f4;
}
.settlement-table1 th {
  padding: 0 20px;
  border-bottom: 1px solid #ababab;
  border-right: 1px solid #ababab;
}
.settlement-table1 tr {
  border-bottom: 1px solid #ababab;
}
.settlement-table1 td {
  text-align: center;
  border-right: 1px solid #ababab;
}
</style>